<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebIM</title>
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <link href="favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon"/>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/templatemo-style.css" rel="stylesheet">
    <link href="/static/layui/dist/css/layui.css" rel="stylesheet">
</head>
<body class="light-gray-bg">
<div class="templatemo-content-widget templatemo-login-widget white-bg tp-8">
</div>
</body>
<script type="text/javascript" src="/static/layui/dist/layui.js"></script>
<script type="text/javascript" src="/static/js/socket.js"></script>
<script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
<script>
    var  uid = "{$Think.session.user.id}";
    var groups = "{$groups}";
    var socket = new WebSocket('ws://127.0.0.1:8282');
    let layimy = null;
    let im_$ = $;
    var messageSaveUrl =  "{:url('index/Index/messageSave')}"; // 消息入库
    var getChatRecordUrl =  "{:url('index/Index/getChatRecord')}"; // 消息入库
    socket.onopen = function(){
        layui.use('layim', function(layim){
            layimy = layim;
            // 绑定uid
            socket.send(JSON.stringify({
                type: 'reg' //随便定义，用于在服务端区分消息类型
                ,data: {
                    'uid':uid,
                    'gid':groups
                }
            }));
            layim.config({
                init: {
                    url:  "{:url('index/Index/iniHomepage')}" //接口地址（返回的数据格式见下文）
                    ,type: 'get' //默认get，一般可不填
                    ,data: {} //额外参数
                } //获取主面板列表信息，下文会做进一步介绍

                //获取群员接口（返回的数据格式见下文）
                ,members: {
                    url:  "{:url('index/Index/getGroupUser')}"  //接口地址（返回的数据格式见下文）
                    ,type: 'get' //默认get，一般可不填
                    ,data: {} //额外参数
                }

                //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
                ,uploadImage: {
                    url: "{:url('index/Index/uploadImg')}" //接口地址
                    ,type: 'post' //默认post
                }

                //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
                ,uploadFile: {
                    url: "{:url('index/Index/uploadImg')}" //接口地址
                    ,type: 'post' //默认post
                }
                //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
                ,tool: [{
                    alias: 'code' //工具别名
                    ,title: '代码' //工具名称
                    ,icon: '&#xe64e;' //工具图标，参考图标文档
                }]
                ,title: 'WebIm' //自定义主面板最小化时的标题
                //,right: '100px' //主面板相对浏览器右侧距离
                ,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
                ,initSkin: '3.jpg' //1-5 设置初始背景
                ,skin: ['aaa.jpg'] //新增皮肤
                ,min:false //是否始终最小化主面板，默认false
                ,notice: true //是否开启桌面消息提醒，默认false
                ,isAudio: true //开启聊天工具栏音频
                ,isVideo: true //开启聊天工具栏视频
                ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

            });

            localStorage.clear();
            // 监听发送消息
            layim.on('sendMessage', function(res){
                webIm.sendMessageSave(res);
            });

            //监听在线状态的切换事件
            layim.on('online', function(status){
                layer.msg(status);
            });

            // 聊天窗口切换
            layim.on('chatChange', function (res) {
                webIm.getChatRecord(res);
            });

            // 监听到消息
            socket.onmessage = function(res){
                webIm.webImonmessage(res);
            };
        })
    };
</script>
</html>